<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全屏滚动</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: #11C2C2;
			}
			
			.item {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transition: transform 300ms ease-in-out;
				color: #FFFFFF;
				font-size: 100px;
				text-align: center;
			}
			
			.one {
				transform: translateY(0);
				background: #0086B3;
			}
			
			.two {
				transform: translateY(100%);
				background: #11C2C2;
			}
			
			.three {
				transform: translateY(200%);
				background: #40BCFF;
			}
			
			.four {
				transform: translateY(300%);
				background: #657CAE;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="item one">1</div>
			<div class="item two">2</div>
			<div class="item three">3</div>
			<div class="item four">4</div>
		</div>
		<script type="text/javascript">
			! function() {
				var list = document.querySelectorAll(".item"),
					len = list.length,
					cur = 0,
					isMoving = false;

				document.body.addEventListener('mousewheel', function(ev) {
					if(ev.wheelDelta > 0) {
						if(!isMoving) {
							if(cur - 1 >= 0) {
								cur--;
								move();
							}
						}

					} else if(ev.wheelDelta < 0) {
						if(!isMoving) {
							if(cur + 1 <= len - 1) {
								cur++;
								move();
							}
						}
					}

				});

				function move() {
					isMoving = true;
					for(var i = 0; i < len; i++) {
						var dis = (-cur + i) * 100;
						list[i].style.transform = "translateY(" + dis + "%)";
					}
					setTimeout(function() {
						isMoving = false;
					}, 500);
				}
			}();
		</script>
	</body>

</html>